<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>

    <script>
        function show(id,e){

            var taskId=setTimeout(function(){
                var xmlHttpRequest=new XMLHttpRequest();

                xmlHttpRequest.open("get","${pageContext.request.contextPath}/show?id="+id,true);

                xmlHttpRequest.onreadystatechange=function(){



                    if(xmlHttpRequest.readyState==4){

                        var data=document.getElementById("data");

                        var x=e.clientX;
                        var y=e.clientY;

                        data.style.left=parseInt(x)+15+"px";
                        data.style.top=parseInt(y)+10+"px";

                        data.style.display="block";

                        var result=xmlHttpRequest.responseText;

                        var user=eval("("+result+")");

                        document.getElementById("id").innerHTML=user.id;
                        document.getElementById("username").innerHTML=user.username;
                        document.getElementById("password").innerHTML=user.password;
                        document.getElementById("phone").innerHTML=user.phone;
                        document.getElementById("address").innerHTML=user.address;

                    }
                };

                xmlHttpRequest.send(null);

            },800);



            this.onmouseout=function(){
                clearTimeout(taskId);
                out();
            };

        }

        function out(){
            document.getElementById("data").style.display="none";
        }

    </script>

</head>
<body>
    <c:forEach items="${users}" var="user">
        <li onmouseover="show(${user.id},event);">${user.username}</li>
    </c:forEach>

    <hr/>

    <div id="data" style="background-color: #dddddd;width: 40%;padding: 8px;display: none;position: absolute;">
        编号：<span id="id"></span><br/>
        账号：<span id="username"></span><br/>
        密码：<span id="password"></span><br/>
        电话：<span id="phone"></span><br/>
        地址：<span id="address"></span><br/>
    </div>
</body>
</html>
